<template>
    <div :class="headerClass" v-if="isNotTop">
        <nav>
            <el-row :gutter="20">
                <el-col :span="8">
                    <router-link to="/">首页</router-link>
                    <div class="grid-content ep-bg-purple"/>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-input
                            v-model="input3"
                            class="w-50 m-2"
                            placeholder="输入搜索内容"
                            :suffix-icon="Search"
                            style="width: 300px;"
                        />
                    </div>
                </el-col>
                <el-col :span="8">
                    <el-row id="right_nav" :gutter="0">
                        <el-col :span="4">
                            <el-popover :width="300"
                                        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                                <template #reference>
                                    <el-avatar v-if="user==null" src=""/>
                                    <el-avatar v-else :src="user.avatar"/>
                                </template>
                                <template #default>
                                    <div v-if="user==null" class="demo-rich" style="display: flex; gap: 16px; flex-direction: column">
                                            <window-login/>

                                            <window-reg/>
                                    </div>
                                    <div v-else class="demo-rich" style="display: flex; gap: 16px; flex-direction: column">
                                        <el-avatar
                                            :size="60"
                                            :src="user.avatar"
                                            style="margin:auto;"
                                        />
                                        <el-button icon="el-icon-arrow-left" icon-position="left" text @click="logout">
                                            <el-icon><SwitchButton/></el-icon>&nbsp;退出登录
                                        </el-button>
                                        <el-button text @click="router.push('/personal')">个人中心</el-button>
                                    </div>
                                </template>
                            </el-popover>
                        </el-col>
<!--                        <el-col :span="4" >-->
<!--                            <el-icon :size="20">-->
<!--                                <Message/>-->
<!--                            </el-icon>-->
<!--                            <br>消息-->
<!--                        </el-col>-->
<!--                        <el-col :span="4" >-->
<!--                            <el-icon :size="20"><Basketball/></el-icon>-->
<!--                            <br>动态-->
<!--                        </el-col>-->
                        <el-col :span="4">
                            <a href="/collect">
                            <el-icon :size="20"><Star/></el-icon>
                            <br>收藏
                            </a>
                        </el-col>
<!--                        <el-col :span="4">-->
<!--                            <el-icon :size="20"><Clock/></el-icon>-->
<!--                            <br>历史-->
<!--                        </el-col>-->
                        <el-col :span="4" style="position: relative">
                            <a href="/upload" target="_blank" style="position: absolute;left: 0">
                                <el-button type="primary"><el-icon :size="25"><UploadFilled/></el-icon>&nbsp;投稿</el-button>
                            </a>
                        </el-col>

                    </el-row>
                </el-col>
            </el-row>

        </nav>
    </div>
</template>

<script setup>
import {Basketball, Clock, Message, Search, Star, UploadFilled} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import WindowLogin from "@/components/window/WindowLogin.vue";
import WindowReg from "@/components/window/WindowReg.vue";
import router from "@/router";
import TokenAxios from "@/http/request/TokenAxios";

const loginDrawer = ref(false)


const user = ref(getUser());

//给需要引用<Header/>添加headerClass的属性，即<HelloWorld headerClass="home-div"/>
defineProps(['headerClass'])


const logout=()=>{
    if (confirm("你确定退出登录")){
         // localStorage.removeItem('loginInfo');

        TokenAxios.post('http://124.71.182.39:27000/passport/logout')
            .then((response)=>{
                if (response.state==20000){
                    localStorage.removeItem('loginInfo');
                    user.value=null;
                    router.push('/')
                }
            })
    }
}

const isNotTop = ()=>{
    return window.pageYOffset > 0;
}

// onMounted(()=>{
//     localStorage.removeItem('loginInfo');
// })
</script>

<style scoped>

.demo-rich {
    margin: auto;
}

.home-div {
    width: 1500px;
    padding:10px;
    height: 120px;
    margin: auto;
    font-size: 12px;
    background-color: white;
    color: #ffffff;
    border-radius: 10px 10px 0 0;
    background-image: url("/public/nav1.png");
    background-size: 100% 100%;
    box-sizing: border-box;
}
.home-div a{
    color: #fff;
    font-size: 12px;
}
a {
    font-weight: bold;
    color: #2c3e50;
}

a.router-link-exact-active {
    color: #42b983;
}
.about-div{
    position: fixed;
    top: 0;
    width: 1500px;
    padding:10px 0;
    margin: 0 auto;
    color: #000;
    font-size: 12px;
    background-color: white;
    border-radius: 10px 10px 0 0;
    background-size: 100% 100%;
    z-index: 999;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /*border-bottom: #99a9bf solid 1px;*/
}
.about-div a{
    color: #000;
    font-size: 12px;
}
nav {
    padding: 0;
    background-color:rgba(255, 255, 0, 0);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

nav a {
    float: left;
    position: relative;
    left: 30px;
    top: 5px;
    font-size: 20px;
    margin-right: 20px;
    font-weight: bold;
    text-decoration: none;
}

nav a.router-link-exact-active {
    /*color: #ffffff;*/
}
#right_nav{
    width: 400px;
    position: relative;
    left: 40px;
}
</style>